iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

html與css粗淺新手入門教學系列 第 5

html表格-合併儲存格

  • 分享至 

  • xImage
  •  

想要在html表格中完成合併儲存格的效果,需要用到rowspan和colspan分別為垂直和水平合併儲存格
先示範rowspan的用法
https://ithelp.ithome.com.tw/upload/images/20210905/20140086zRTmQgarzt.jpg
rowspan="2"可以想成是合併兩格的意思,但只要輸入的數字大於表格可以往下合併的格數,就只會得到同樣的效果
https://ithelp.ithome.com.tw/upload/images/20210905/201400869QUwNdPE0z.jpg
注意rowspan與colspan都需要放在要合併格子的起始點,以上面的例子來說如果放在第二格則會得到以下效果
https://ithelp.ithome.com.tw/upload/images/20210905/20140086i23PjfVxR1.jpg
右下角被合併的格子中也不能有第五個td存在,否則會被視為新一行的格子,如下圖
https://ithelp.ithome.com.tw/upload/images/20210905/20140086L2Z7Yvw75l.jpg
https://ithelp.ithome.com.tw/upload/images/20210905/201400864EudmnZfjZ.jpg
雖然最後一個td中沒有內容,但還是出現了新的一行格子

再介紹一個rowspan的特殊用法,若輸入rowspan="0"就代表合併至最底部,範例如下
https://ithelp.ithome.com.tw/upload/images/20210905/20140086PQXcIK4Xkb.jpg
https://ithelp.ithome.com.tw/upload/images/20210905/20140086OpP0XguxQn.jpg

colspan與rowspan的用法大致相同,就不多做說明,直接看下面範例
https://ithelp.ithome.com.tw/upload/images/20210905/20140086VUm0lYrPS6.jpg
https://ithelp.ithome.com.tw/upload/images/20210905/201400863EVoTo5en7.jpg


上一篇
html表格
下一篇
用html和css做出網頁的標題欄
系列文
html與css粗淺新手入門教學30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言